<template>
    <!--新手引导-->
    <div class="module guide-module ui-icon-notice">
        <div class="guide-title-img1"></div><div class="guide-title-img"></div>
        <div class="module-header with-border"><h1>Hi,我是你的新手指导</h1></div>
        <div class="module-content">
            <ul class="list">
                <li class="guide-handle"><a target="_blank" href="../../../static/manual/index.html">UAP学堂</a></li>
                <li class="guide-problem"><a target="_blank" href="../../../static/question.html">常见问题</a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "guide"
    }
</script>

<style scoped>
    /*新手引导*/
    .guide-module{
        padding: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
    .guide-module .module-header{
        padding: 0;
    }
    .guide-module .module-header h1{
        background-color: #f7b01a;
        height: 35px;
        margin-top: 20px;
        width: 100%;
        line-height: 35px;
        padding-left: 80px;
    }
    .guide-module .guide-title-img {
        width: 55px;
        height: 55px;
        position: absolute;
        margin-top: 2px;
        margin-left: 20px;
        margin-right: 10px;
        z-index: 10;
        background: url(../../../static/resources/img/guide-title.png) center no-repeat;
        background-size: 100%;
    }
    .guide-module .module-header h1 .guide-title-img{
        margin-top: -20px;
        margin-left: 20px;
        margin-right: 10px;
        width: 44px;
        height: 44px;
        background: url('../../../static/resources/img/guide-title.png') no-repeat center;
        background-size: 100%;
        display: inline-block;
    }
    .guide-module .module-content{
        box-shadow: 0 2px 3px #dad8d8;
        background: #fff;
        padding: 13px 15px 14px 15px;
        border: 1px solid #E4E4E4;
        border-top:0 ;
    }
    .guide-module ul.list li{
        padding: 10px 5px;
        display: inline-block;
        /*margin: 0 10px;*/
        width:40%;
    }
    .guide-module ul.list li:nth-child(1){
        margin-left: 10%;
        margin-right: 5%;
    }
    .guide-module ul.list a{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        width: 100%;
        font-size: 14px;
        color: #3a3c64;
        padding-left: 30px;
    }
    .guide-handle{
        background: url("../../../static/resources/img/guide-handle.png") left center no-repeat;
    }

    .guide-problem{
        background: url("../../../static/resources/img/guide-problem.png") left center no-repeat;
        padding-left: 33px;
    }

</style>
